<template>
    <div class="news_page">
      <!-- 导航 开始 -->
      <nav-bar title="资讯详情"></nav-bar>
      <!-- 导航 end -->
  
      <!-- 顶部标题 开始 -->
      <div class="top_info">
        <h1 class="h1">{{ newsInfo.articleName }}</h1>
        <div class="time_box">
          <div class="left">
            <div class="avatar">
              <img src="@/assets/images/avatar_user.png" class="img" alt="">
            </div>
            <div class="info">
              <span>{{ newsInfo.articleAuthor }}</span>
              <span>更新于 {{ newsInfo.orderTime }}</span>
            </div>
          </div>
          <span>{{ newsInfo.initReadCnt }}浏览</span>
        </div>
      </div>
      <!-- 顶部标题 end -->
  
      <div class="news_content" v-html="newsInfo.content">
      </div>
  
      <!-- 相关问题 开始 -->
      <div class="issues" v-if="newsInfo.relQuestions && newsInfo.relQuestions.length">
        <div class="head">相关问题</div>
        <div class="list_box">
          <div class="news" v-for="(item, index) in (newsInfo.relQuestions || [])" :key="index" @click="lookDetail(item)">
            <h2 class="h2">{{ item.question }}</h2>
            <div class="time">
              <div class="left">
                <span>{{ item.questionPerson }}</span>
                <span class="circle"></span>
                <span>{{ DIAPLAYTIME(item.questionTime) }}</span>
              </div>
              <div class="right">
                <van-icon name="ellipsis" class="van_icon" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 相关问题 end -->
  
    </div>
  </template>
  
  <script>
  import { GET_ARTICLE_INFO } from '@/http/interface'
  import { DIAPLAYTIME } from '@/utils/utils'
  export default {
    data() {
      return {
        newsId:'',
        newsInfo: {},
        title: "",
        description: "",
        keywords: "",
        DIAPLAYTIME: str => DIAPLAYTIME(str)
      };
    },
    head() {
      return {
        title: this.title,
        meta: [
          {
            hid: "description",
            name: "description",
            content: this.description,
          },
          {
            hid: "Keywords",
            name: "Keywords",
            content: this.keywords,
          },
        ],
        link:[
        {ref:'canonical',href:`${this.$domain}/news/detail/${this.newsId}`}
      ]
      };
    },
    async asyncData({ query, $axios,params }) {
      let _params = {}
      _params.id = params.id;
      let res = await $axios.get(GET_ARTICLE_INFO, { params: _params })
      console.log(res)
      let newsInfo = res.data || {}
      return {
        newsInfo,
        title: newsInfo.seoTitle,
        keywords: newsInfo.seoKeywords,
        description: newsInfo.seoDescription,
        newsId:params.id
      }
    },
    methods: {
      // 跳转到相关问题
      lookDetail(row) {
        this.$router.push({
          path: `/questions/${row.id}`,
        });
      }
    }
  };
  </script>
  <style lang="less" scoped>
  @import '/assets/styles/news/detail.less';
  </style>
  